:host {
  display: block;
  --ti-pathfield-height: 26px;
  --ti-pathfield-back-width: 26px;
}

.ti3-pathField-container {
  color: var(--ti-common-color-text-primary);
  font-size: var(--ti-common-font-size-base);
  font-weight: var(--ti-common-font-weight-4);
  line-height: var(--ti-pathfield-height);
  display: flex;
  height: var(--ti-pathfield-height);
  border: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
  border-radius: var(--ti-common-border-radius-normal);
  align-items: center;
  position: relative;
}

.ti3-pathField-backIcon {
  display: block;
  width: var(--ti-pathfield-back-width);
  text-align: center;
  font-size: var(--ti-common-font-size-1);
  cursor: pointer;
  border-right: var(--ti-common-border-weight-normal) var(--ti-common-border-style-solid) var(--ti-common-color-line-normal);
  box-sizing: border-box;
  &:hover {
    color: var(--ti-common-color-bg-emphasize);
  }
}
.ti3-pathField-items {
  display: flex;
  flex: 1;
  height: var(--ti-pathfield-height);
  padding: var(--ti-common-space-0) var(--ti-common-space-10);
  box-sizing: border-box;
  user-select: none;
  overflow: hidden;
  .ti3-pathField-item {
    &:not(:last-child) {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      color: var(--ti-common-color-text-weaken);
      cursor: pointer;
      &:hover .ti3-pathField-item-label {
        color: var(--ti-common-color-text-highlight);
      }
    }
    &:last-child {
      width: 100%;
      font-weight: var(--ti-common-font-weight-7);
      .ti3-pathField-item-label {
        max-width: none;
      }
      .ti3-pathField-item-divid {
        display: none;
      }
    }
  }
}

.ti3-pathField-item-label {
  max-width: 160px;
}
.ti3-pathField-item-divid {
  margin: var(--ti-common-space-0) var(--ti-common-space-base);
}

input.ti3-pathField-Editor {
  width: calc(100% + var(--ti-common-border-weight-normal) * 2);
  height: calc(var(--ti-pathfield-height) + var(--ti-common-border-weight-normal) * 2);
  position: absolute;
  left: calc(0px - var(--ti-common-border-weight-normal));
}
